<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="">
              <a-input placeholder="关键词搜索" v-model="queryParam.queryName"></a-input>
            </a-form-item>
          </a-col>

        <a-col :xl="6" :lg="7" :md="8" :sm="24">
               <a-select @change="change_dingzhiInfo" v-model="select_topcategory" style="color: #a09d9d" placeholder="请选择定制项">
                  <a-select-option :value="item.id" v-for="item in categoryList" >{{ item.parameter }}</a-select-option>
               </a-select>
        </a-col>

<!--          <a-button type="primary" @click="add_category(0)" icon="plus" style="color: #F9D532;font-size: 12px;width: 110px;height: 34px;background: #333333;border-style: none;float: left;">新增定制项</a-button>-->
          <a-button type="primary" @click="showdingzhi_list" style="color: #F9D532;font-size: 12px;width: 90px;height: 34px;background: #333333;border-style: none;float: left;margin-left: 10px;">刷新定制项</a-button>

          <a-col :xl="4" :lg="7" :md="8" :sm="24" style="float: right">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" style="color: #F9D532;width: 80px;height: 34px;background: #333333;border-style: none;">查询</a-button>
              <a-button type="primary" @click="searchReset" style="margin-left: 8px;width: 80px;height: 34px;background: #eae7e7;border-style: none;color: #323232">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <div style="background: #f2f2f2;height: 5px;width: auto;margin-top: 10px;margin-bottom: 15px;"></div>

    <div>
      <div>
        <span style="font-size: 24px;color: #2d2d2d;font-weight: bolder">{{dingzhiName}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 30px;">序号：{{dingzhiXu}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 15px;">编号：{{dingzhiCode}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 15px;">新增时间：{{dingzhiTime}}</span>
        <span style="font-size: 13px;color: #aaa8a8;margin-left: 15px;">状态：{{dingzhiStaus}}</span>
        <div style="float: right;margin-right: 16px;margin-top: 10px;">
          <a-menu-item style="font-size: 14px;color: #585858;margin-top: 5px;float: left" v-show="dingzhiStaus=='已禁用'">
            <a-popconfirm title="确定启用该定制项吗?" @confirm="() => delete_dingzhi(select_topcategory,0)">
              <a style="font-size: 14px;color: #08e02c;">启用</a>
            </a-popconfirm>
          </a-menu-item>

          <a-menu-item style="margin-left: 10px;float: left;margin-top: 4px;" v-show="dingzhiStaus=='已启用'">
            <a-popconfirm title="确定禁用该定制项吗?" @confirm="() => delete_dingzhi(select_topcategory,1)">
              <a style="font-size: 14px;color: #ef0a0a;">禁用</a>
            </a-popconfirm>
          </a-menu-item>
        </div>

      </div>
      <div>
        <span style="font-size: 13px;color: #585858;margin-top: 10px;">备注：{{dingzhiRemark}}</span>
      </div>
    </div>

    <div style="background: #f2f2f2;height: 10px;width: auto;margin-top: 16px;margin-bottom: 30px;"></div>

    <div>
      <div style="border: none;background-color: #ffffff;padding-bottom: 28px;margin-bottom: 10px;">
        <span style="font-size: 16px;float: left;color:#000000;font-weight: bold;">参数列表</span>
        <a-popconfirm title="确定全部禁用参数吗?" @confirm="() => all_jin(1)">
<!--          <a style="font-size: 14px;color: #08e02c;">启用</a>-->
          <a-button type="primary" style="color: #F9D532;width: 85px;height: 34px;background: #333333;border-style: none;float: right;">全部禁用</a-button>
        </a-popconfirm>

        <a-popconfirm title="确定全部启用参数吗?" @confirm="() => all_jin(0)">
        <a-button type="primary" style="color: #F9D532;width: 85px;height: 34px;background: #333333;border-style: none;float: right;margin-right: 10px">全部启用</a-button>
        </a-popconfirm>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.img)" icon="img"/>
          </div>
        </template>

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <div align="center" style="align-content: center;margin-left: 30px;">
<!--          <a @click="add_categoryCanshu(record)" style="float: left;margin-left: 10px;font-size: 14px;color: #d29328;">编辑</a>-->
            <a-menu-item style="float: left;margin-left: 10px;font-size: 14px;color: #d29328;" v-show="record.status=='1'">
            <a-popconfirm title="确定启用该参数吗?" @confirm="() => delete_dingzhi_canshu(record.id,0)">
              <a style="font-size: 14px;color: #08e02c;">启用</a>
            </a-popconfirm>
          </a-menu-item>
           <a-menu-item style="margin-left: 10px;float: left;margin-top: 0px;" v-show="record.status=='0'">
            <a-popconfirm title="确定禁用该参数吗?" @confirm="() => delete_dingzhi_canshu(record.id,1)">
              <a style="font-size: 14px;color: #ef0a0a;">禁用</a>
            </a-popconfirm>
          </a-menu-item>
          </div>
        </span>
      </a-table>
    </div>

    <EditDingzhiModule ref="modalForm" @ok="modalFormOk"></EditDingzhiModule>
    <AddDingzhiCanshuModule ref="modalForm2" @ok="modalFormOk"></AddDingzhiCanshuModule>
  </a-card>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {putAction,getFileAccessHttpUrl} from '@/api/manage';
  import JDate from '@/components/jeecg/JDate.vue'
  import '@/assets/less/TableExpand.less'
  import EditDingzhiModule from './modules/EditDingzhiModule'
  import AddDingzhiCanshuModule from './modules/AddDingzhiCanshuModule'
  import { httpAction, postAction, getAction } from '@/api/manage'

  export default {
    name: "categoryinfo",
    mixins:[JeecgListMixin],
    components: {
      JDate,
      EditDingzhiModule,
      AddDingzhiCanshuModule
    },
    data () {
      return {
        description: 'categoryinfo管理页面',
        select_topcategory:'请选择定制项',//选中的定制项id
        dingzhiName:'',//定制项名称
        dingzhiId:'',//定制项id
        dingzhiXu:'',//定制项序号
        dingzhiCode:'',
        dingzhiTime:'',
        dingzhiRemark:'',
        dingzhiStaus:'',
        categoryList: [],
        select_dingzhi:[],//选中的定制项
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'参数名称',
            align:"center",
            dataIndex: 'categoryName'
          },
          {
            title:'编号',
            align:"center",
            dataIndex: 'categoryCode'
          },
          {
            title:'排序',
            align:"center",
            dataIndex: 'numbers',
          },
          {
            title: '图片',
            align: "center",
            width: 150,
            dataIndex: 'img',
            scopedSlots: {customRender: "avatarslot"}
          },

          {
            title:'添加时间',
            align:"center",
            dataIndex: 'createTime',
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'status',
            customRender(index) {
              if(index=='0'){
                return "已启用"
              }else {
                return "已禁用"
              }
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: "/admin/testplate/test_dignzhipartmer?topcategory_id="+this.$route.query.category_id+"&module_id="+this.dingzhiId,
          query_dingzhiList:"/admin/testplate/query_dingzhiByplateId",
          query_dingzhiDetail:"/admin/parameter/query_dingzhiBydingzhiId",
          delete_dingzhi:"/admin/testplate/change_dingzhi_status",
          delete_canshu:"/admin/testplate/change_dingzhi_canshu_status",
          all_jinyong:'/admin/testplate/keyong_all_canshu'
        }
      }
    },
    created () {
      // alert(this.$route.query.category_id)
      this.showdingzhi_list();
    },
    methods: {
      all_jin(staus){
        // this.$message.success("正在努力开发中...")
        let params = {category_id:this.$route.query.category_id,dingzhi_id:this.select_topcategory,type:"2",status:staus};
        httpAction(this.url.all_jinyong,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.loadData();
          }else {
            this.$message.error(res.message);
          }
        });
      },
      showdingzhi_list() {//查询定制项列表
        let params = {category_id:this.$route.query.category_id};
        getAction(this.url.query_dingzhiList,params).then((res)=>{
          if(res.success){
             this.categoryList = res.result;
            let params = {dinghzi_id:res.result[0].id};
            getAction(this.url.query_dingzhiDetail,params).then((res)=>{
              console.info(res);
              if(res.success){
                this.dingzhiName=res.result.parameter;
                this.dingzhiId=res.result.id;
                this.select_topcategory = res.result.id;
                this.dingzhiXu=res.result.numbers;
                this.dingzhiCode=res.result.code;
                this.dingzhiTime=res.result.createTime;
                this.dingzhiRemark=res.result.remark;
                if(res.result.status==1){
                   this.dingzhiStaus="已禁用"
                }else {
                   this.dingzhiStaus="已启用"
                }
                this.url.list = "/admin/testplate/test_dignzhipartmer?topcategory_id="+this.$route.query.category_id+"&module_id="+res.result.id
                this.loadData();
              }else {
                this.$message.error("查询失败1");
              }
            });
          }else {
            this.dingzhiName='暂无';
            this.dingzhiXu='暂无';
            this.dingzhiCode='暂无';
            this.dingzhiTime='暂无';
            this.dingzhiRemark='暂无';
          }
        });
      },
      change_dingzhiInfo(){//查询定制项详情
        let params = {dinghzi_id:this.select_topcategory};
        getAction(this.url.query_dingzhiDetail,params).then((res)=>{
          if(res.success){
            // alert(res.result.id);
            if(res.result.status==1){
              this.dingzhiStaus="已禁用"
            }else {
              this.dingzhiStaus="已启用"
            }
              this.select_dingzhi = res.result;
              this.dingzhiName=res.result.parameter;
              this.dingzhiId=res.result.id;
              this.dingzhiXu=res.result.numbers;
              this.dingzhiCode=res.result.code;
              this.dingzhiTime=res.result.createTime;
              this.dingzhiRemark=res.result.remark;
              this.url.list = "/admin/testplate/test_dignzhipartmer?topcategory_id="+this.$route.query.category_id+"&module_id="+res.result.id
              this.loadData();
          }else {
            // this.$message.error("查询失败33");
          }
        });
      },
      delete_dingzhi(id,staus){//删除
        if(id=='请选择定制项'){
          this.$message.warning("请选择你要删除的定制项");
          return;
        }
        let params = {dingzhi_id:id,type:"2",status:staus};
        httpAction(this.url.delete_dingzhi,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.categoryList=[];
            this.showdingzhi_list();
          }else {
            this.$message.error(res.message);
          }
        });
      },
      delete_dingzhi_canshu(id,staus){//删除参数
        let params = {dingzhi_id:id,type:"2",status:staus};
        httpAction(this.url.delete_canshu,params,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
            this.loadData();
          }else {
            this.$message.error(res.message);
          }
        });
      },

      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      add_category(record) {
        if(record=="0"){
          this.$refs.modalForm.title = "新增定制项";
        }else {
          this.$refs.modalForm.title = "编辑定制项";
        }
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.disableSubmit = true;
      },
      add_categoryCanshu(record){//添加参数
        if(record.id!=null){
          this.$refs.modalForm2.title = "编辑参数";
        }else {
          this.$refs.modalForm2.title = "新增参数";
        }
        this.$refs.modalForm2.edit(record);
        this.$refs.modalForm2.disableSubmit = true;
      },

      goto_setcategory_home(categoryid){
        this.$router.push({path:'/setcategory/chanshu',query: {id:categoryid}})
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>